【JavaScript入門】カスタムイベントの作成方法

2020/2/3 javascript

JavaScriptではEventコンストラクタを使用すると、カスタムイベントを定義することができます。

カスタムイベントの作成方法

Eventコンストラクタの引数に、作成したいイベント名を渡すとカスタムイベントを作成することができます。

カスタムイベントを実行するには、dispatchEvent の引数に実行するEventオブジェクトを渡します。

// イベントの生成
var custom_event = new Event("alert_event");

// イベントリスナーにカスタムイベント（"alert_event"）を登録
window.addEventListener("alert_event", function(){
  alert("アラートを表示");
});

// カスタムイベントを実行
window.dispatchEvent(custom_event);

// イベントの生成

var custom_event = new Event("alert_event");

// イベントリスナーにカスタムイベント（"alert_event"）を登録

window.addEventListener("alert_event", function(){

alert("アラートを表示");

});

// カスタムイベントを実行

window.dispatchEvent(custom_event);

また、Eventコンストラクタの第二引数を指定することでイベントのバブリングやキャンセル可能かを指定することができます。

// イベントの生成（第二引数を指定）
var custom_event = new Event("alert_event",{ bubbles:true, cancelable:true });

1 2	// イベントの生成（第二引数を指定） var custom_event = new Event("alert_event",{ bubbles:true, cancelable:true });

bubbles：バブリングの可否。（デフォルト：false）

cancelable：キャンセルの可否。（デフォルト：false）